<template>
    <el-container>
        <el-aside width="50%">
            <el-container>
                <el-header>
                    <div class="left-panel">
                        <el-button type="primary" icon="el-icon-plus" @click="dict_add"></el-button>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="dictTable" :apiObj="dictApiObj" row-key="id" @current-change="currentChange" stripe highlightCurrentRow @row-click="rowClick">
                        <sc-table-column label="序号" type="index"></sc-table-column>
                        <el-table-column label="字典编码" prop="dictCode" min-width="200"></el-table-column>
                        <el-table-column label="字典名称" prop="dictName" max-width="300"></el-table-column>
                        <el-table-column label="状态" prop="status" width="80">
                            <template #default="scope">
                                <el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="ENABLED"
                                           inactive-value="DISABLED"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="150">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button type="info" size="small" @click.stop="dict_show(scope.row)" icon="el-icon-view"></el-button>
                                    <el-button type="primary" size="small" @click.stop="dict_edit(scope.row)" icon="el-icon-edit"></el-button>
                                    <el-popconfirm title="确定删除吗？" @confirm="dict_del(scope.row, scope.$index)">
                                        <template #reference>
                                            <el-button type="danger" size="small" @click.stop icon="el-icon-delete"></el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-aside>
        <el-container class="is-vertical">
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="detail_add" :disabled="selection === undefined"></el-button>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="detailTable" :apiObj="detailApi" row-key="id" :params="detailApiParams" stripe>
                    <sc-table-column label="序号" type="index"></sc-table-column>
                    <el-table-column label="项编码" prop="dictDetailCode" width="200"></el-table-column>
                    <el-table-column label="项名称" prop="dictDetailName" width="200">
                        <template #default="scope">
                            <el-tag :type="scope.row.type">{{ scope.row.dictDetailName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
                    <el-table-column label="状态" prop="status" width="70">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" @change="changeDetailSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="ENABLED"
                                       inactive-value="DISABLED"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="info" size="small" @click="detail_show(scope.row)" icon="el-icon-view"></el-button>
                                <el-button type="primary" size="small" @click="detail_edit(scope.row, scope.$index)" icon="el-icon-edit"></el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="detail_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button type="danger" size="small" icon="el-icon-delete"></el-button>
                                    </template>
                                </el-popconfirm>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>

    <dict-dialog v-if="dialog.dict" ref="dictDialog" @success="handleDictSuccess" @closed="dialog.dict=false"></dict-dialog>

    <detail-dialog v-if="dialog.detail" ref="detailDialog" @success="handleDetailSuccess" @closed="dialog.list=false"></detail-dialog>

</template>

<script>
import dictDialog from './dict'
import detailDialog from './dict-detail'

export default {
    name: 'dict',
    components: {
        dictDialog,
        detailDialog,
    },
    data() {
        return {
            dictApiObj: this.$API.system.dict,
            detailApi: this.$API.system.dictDetail,
            detailApiParams: {},
            dialog: {
                dict: false,
                detail: false,
            },
            selection: undefined
        }
    },
    methods: {
        //添加
        dict_add() {
            this.dialog.dict = true
            this.$nextTick(() => {
                const parentId = this.selection ? this.selection.id : '0'
                const param = {parentId: parentId, status: "ENABLED"};
                this.$refs.dictDialog.open().setDefaultValue(this.getParent(parentId)).setData(param)
            })
        },
        //编辑
        dict_edit(row) {
            this.dialog.dict = true
            this.$nextTick(() => {
                this.$refs.dictDialog.open('edit').setDefaultValue(this.getParent(row.parentId)).setData(row)
            })
        },
        //表格内开关事件
        async changeSwitch(val, row) {
            //1.还原数据
            row.status = row.status === 'ENABLED' ? 'DISABLED' : 'ENABLED'
            //2.执行加载
            row.$switch_status = true;
            //3.等待接口返回后改变值
            const res = await this.$API.system.dict.switch({id: row.id, status: val});
            if (res.code === 200) {
                delete row.$switch_status;
                row.status = val;
                this.$message.success("操作成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //查看
        dict_show(row) {
            this.dialog.dict = true
            this.$nextTick(() => {
                this.$refs.dictDialog.open('show').setDefaultValue(this.getParent(row.parentId)).setData(row)
            })
        },
        //删除
        async dict_del(row) {
            const res = await this.$API.system.dict.delete(row.id);
            if (res.code === 200) {
                this.$refs.dictTable.refresh()
                if (this.detailApiParams.dictCode === row.dictCode) {
                    this.detailApiParams.dictCode = row.dictCode
                    this.$refs.detailTable.reload(this.detailApiParams)
                }
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //本地更新数据
        handleDictSuccess(data, mode) {
            if (mode === 'add') {
                this.$refs.dictTable.refresh()
            } else if (mode === 'edit') {
                this.$refs.dictTable.refresh()
            }
        },
        rowClick(row) {
            if (this.detailApiParams.dictCode !== row.dictCode) {
                this.detailApiParams.dictCode = row.dictCode
                this.$refs.detailTable.reload(this.detailApiParams)
            }
        },
        //表格选择后回调事件
        currentChange(selection) {
            this.selection = selection;
        },


        //添加
        detail_add() {
            if (!this.selection) {
                this.$alert('请选择项目', "提示", {type: 'error'})
                return;
            }
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open().setData({status: "ENABLED", type: 'info', sort: 100, dictCode: this.selection.dictCode})
            })
        },
        //编辑
        detail_edit(row) {
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open('edit').setData(row)
            })
        },
        //表格内开关事件
        async changeDetailSwitch(val, row) {
            //1.还原数据
            row.status = row.status === 'ENABLED' ? 'DISABLED' : 'ENABLED'
            //2.执行加载
            row.$switch_status = true;
            //3.等待接口返回后改变值
            const res = await this.$API.system.dictDetail.switch({id: row.id, status: val});
            if (res.code === 200) {
                delete row.$switch_status;
                row.status = val;
                this.$message.success("操作成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //查看
        detail_show(row) {
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open('show').setData(row)
            })
        },
        //删除
        async detail_del(row) {
            const res = await this.$API.system.dictDetail.delete(row.id);
            if (res.code === 200) {
                this.$refs.detailTable.refresh()
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //本地更新数据
        handleDetailSuccess(data, mode) {
            if (mode === 'add') {
                this.$refs.detailTable.refresh()
            } else if (mode === 'edit') {
                this.$refs.detailTable.refresh()
            }
        },
        getParent(parentId) {
            if (!parentId || parentId === '0') {
                return {id: "0", dictName: "顶级字典"};
            }

            return this.getParentRecursion(parentId, this.$refs.dictTable.tableData);
        },
        getParentRecursion(id, tableData) {
            let row;
            for (let index = 0; index < tableData.length; index++) {
                row = tableData[index]
                if (row.id === id) {
                    return row;
                } else if (row.children && row.children.length > 0) {
                    const result = this.getParentRecursion(id, row.children);
                    if (result) {
                        return result;
                    }
                }
            }
            return null
        }
    }
}
</script>

<style>

</style>
